<template>
  <div style="min-width: 1200px;width:100%;">
    <quick></quick>
    <div class="bg" :class="{ update: updateEnable }">
      <div  class="first_type_bl bg" >
        <div class="common-header">
          <div class="common-container header-box">
            <nuxt-link to="/">
              <img
                :alt="site.systemName"
                :src="site.logo || placeHolderLogo"
                title=""
                class="logoimg"/>
            </nuxt-link>

            <ul>
              <!--            <a v-for="(tab, idx) in tabList" :key="idx" :href="tab.path">-->
              <!--              <el-button :class="{'active':tabsClass[idx]}" @click="changeClass()">{{ tab.label }}</el-button>-->
              <!--            </a>-->
              <li v-for="(tab, idx) in tabList" :key="idx" :class="{'header-nav-active':tabsClass[idx]}" >
                <nuxt-link :to="tab.path" @click="changeClass()" >{{ tab.label }}</nuxt-link>
              </li>
              <!--            <li><a href="http://oe.11kys.cn/">首页</a></li>-->
              <!--            <li class="header-nav-active"><a href="http://oe.11kys.cn/dirlist.html">商品目录</a></li>-->
              <!--            <li><a href="http://oe.11kys.cn/contact.html">客服中心</a></li>-->
            </ul>
            <div class="kys-madestyle-search">
              <div class="layui-input-inline" style="width:200px;">
                <input type="text" name="_keyword" required="" lay-verify="required" placeholder="请输入关键词"
                       autocomplete="off" class="layui-input" v-model="searchTxt">
              </div>
              <div class="layui-input-inline">
                <button class="layui-btn kys-madestyle-searchbtn"  @click="toSearchCatalog">搜索</button>
              </div>
            </div>
          </div>
        </div>
        <div class="common-container usercenter-container">
          <div class="usercenter-nav">
            <vip-dialog ref="vip"></vip-dialog>
            <self-update ref="self"></self-update>
            <div class="userimgbox">
              <nuxt-link to="/" class="updateimg">
                <img
                  :src="user.headImg || 'http://baota.111zh.cn/Public/Front/xinmeng1/images/mrtx.png'"
                  alt="头像">
              </nuxt-link>
              <div class="userinfobox" style="padding: 10px 0px;width: 130px;min-width: 130px;">
                <p>
                  <a  style="float:left;">用户编号：{{ user.localUserID }}</a>
                </p>

                <p>
                  <a  style="float:left;">用户余额：{{ (user.userMoney ? user.userMoney.money : 0) | n3 }}</a>
                </p>
                <p>
                  <a  style="float:left;">用户等级： {{ user.userLevel ? user.userLevel.levelName : '' }}</a>
                  <a     v-if="updateEnable"
                         @click="$parent.$refs.self.show()"
                         class="el-icon-upload"></a>
                </p>
              </div>
              <div class="usercenter-money-body">
                <nuxt-link class="layui-btn layui-btn-sm" to="/charge4">我要充值</nuxt-link>
                <nuxt-link class="layui-btn layui-btn-primary layui-btn-sm"
                   to="/charge-list4">我要补款</nuxt-link>
              </div>
            </div>
            <div class="usercenter-nav-items">
              <h3><i class="dengluyonghuming1"></i><nuxt-link to="/account4">会员中心</nuxt-link></h3>
              <ul>

                <li
                  v-for="item in navMenuItems"
                  :key="item.text">
                  <nuxt-link
                    :to="item.href"
                    :class="{
                      'nav-item-active': $route.path === item.href
                    }">
                    {{ item.text }}
                  </nuxt-link>
                </li>

<!--                <li><a href="/favorite4">我的收藏</a></li>-->
<!--                <li><a href="/transfer4">我要转账</a></li>-->


              </ul>
            </div>
          </div>
          <nuxt/>
        </div>
        <!-- <div class="common-footer common-fluid">
          <div class="common-container footer-box">
            <p>

              版权所有:<a href="javascript:;">{{ site.icp }}</a> <br> ICP备案号:<a href="/"
                                                                            target="_blank">{{ site.icp }}</a> <a href="javascript:;" style="margin:10px">运营商:{{ site.icp }}</a> <a
              href="/" target="_blank"><img src="http://baota.111zh.cn/Public/Front/xinmeng1/images/icp.png" alt=""
                                            style="margin-right: 5px;vertical-align: middle;,width:auto">公安网备{{ site.icp2 }}号</a>
            </p>
          </div>
        </div> -->
        <webFooter />
      </div>

    </div>
    <qqservice />
  </div>

</template>

<script>
import '@/plugins/element-ui'
import { mapState,mapMutations } from 'vuex'
import webFooter from '@/components/webFooter4.vue'
import fixupMixin from '@/mixins/fixup'
import Quick from '@/components/quick4'
import tabs from '@/constants/navTabs4'
import supplyTabs from '@/constants/supplyNavTabs'
import leftNavs from '@/constants/webLeftNavs'
import supplyLeftNavs from '@/constants/supplyLeftNavs'
import RightBoard from '@/components/rightBoard'
import vipDialog from '@/components/dialog/updateVip'
import selfUpdate from '@/components/dialog/selfUpdate'
import qplayer from '@/components/themes/qplayer'
import user from '@/common/user'
import qqservice from '@/components/themes/qqservice'

import log from "~/pages/wap/log";

export default {
  middleware: ['authorization', 'site', 'themes'],
  components: {
    Quick,
    RightBoard,
    vipDialog,
    selfUpdate,
    qplayer,
    qqservice,
    webFooter,
  },
  mixins: [fixupMixin],
  data() {
    return {
      urlArr:['/main4','/category-list4','/contact4'],
      tabsClass:[false,false,false],
      fixupPage: 'in',
      activeIndex: '-1',
      isSupply: false,
      isCollapse: false,
      searchTxt: '',
      isWindowHeight: 0,
      linkMenuDataTop: [],
      navMenuItems: [
        {
          text: '用户资料',
          href: '/my4',
        },
        {
          text: '我的收藏',
          href: '/favorite4',
        },
        {
          text: '订单记录',
          href: '/orders4',
        },
        {
          text: '充值记录',
          href: '/charge-list4',
        },
        {
          text: '资金明细',
          href: '/bill4',
        },
        {
          text: '我要转账',
          href: '/transfer4',
        },
        {
          text: '我要提现',
          href: '/withdraw4',
        },
        {
          text: '安全设置',
          href: '/safe4',
        },
        {
          text: '架设VIP站',
          href: '/vip4',
        },
        {
          text: '自助升级',
          href: '/selfUpdate4',
        },
        {
          text: '我的代理',
          href: '/agent4',
        },
        {
          text: '我的投诉',
          href: '/complain4',
        },
        {
          text: '联系客服',
          href: '/contact4',
        },
      ],
      placeHolderLogo: require('~/assets/images/logo.jpg'),
    }
  },
  created() {
    var url  = this.$route.path;
    console.log(url);
    this.urlArr.forEach((element,index) => {
      if(url.indexOf(element) != -1){
        this.tabsClass[index] = true;
      }
    });
    // alert("111111"+ JSON.stringify(this.tabsClass))
    if (this.$route.path === '/goods-list4') {
      if (this.$route.query.categoryId) {
        this.tabsClass[1] = true
        this.tabsClass[2] = false
      }
    }
    this.getLinkMenuList()
  },
  methods: {
    toLoadAgain () {
      window.location.reload();
    },
    doLogout() {
      user.removeToken(this.$cookies)
      location.href = '/'
    },
    toSearchGoods () {
      if (this.$route.path === '/goods-list4') {
        this.setSearchFeach(this.searchTxt)
      } else {
        this.$router.push({
          path: '/goods-list4',
          query: {
            keywords: this.searchTxt
          }
        })
      }
    },
    toSearchCatalog () {

      this.$router.push({
        path: '/goods-list4',
        query: {
          keywords: this.searchTxt
        }
      })
    },
    changeClass(){
      this.tabsClass.forEach((item,index)=>{
        this.tabsClass[index] = false;
      })
    },
    checkSupply(nav) {
      if (!nav.isSupply) {
        return true
      }
      // 是true，需要校验用户类型
      const user = this.$store.getters.user
      if (!user.userExtend) {
        return false
      }
      if (user.userExtend.isSupply === 1) {
        return true
      }
      return false
    },
    toUpDatSlider () {
      this.isCollapse = !this.isCollapse
      console.log(this.isCollapse)
    },
    getWindowHeight () {
      let bodyDom = window.screen.availHeight;
      console.log(bodyDom)
      this.isWindowHeight = bodyDom - 63
    },
    async getLinkMenuList() {
      let that = this
      const res = await this.$axios.get('/site/customMenu/listForDomain')
      if (res.code === 1001) {
        if (res.body) {
          that.linkMenuDataTop = res.body
        }
      }
    },
    ...mapMutations([
      'setSearchFeach'
    ])
  },
  computed: {
    ...mapState({
      updateEnable: (state) => state.updateEnable,
      site: (state) => state.site,
      systemStyle: (state) => state.systemStyle,
      user: (state) => state.user,
      page: (state) => state.systemStyle.insideStyle,
    }),
    tabList() {
      if (this.isSupply) {
        return supplyTabs
      } else {
        return tabs
      }
    },
    navList() {
      if (this.isSupply) {
        return supplyLeftNavs
      } else {
        return leftNavs
      }
    }
  },
  mounted() {
    for (let i = 0; i < this.navList.length; i++) {
      if (this.navList[i].children) {
        const subList = this.navList[i].children
        for (let j = 0; j < subList.length; j++) {
          if (subList[j].path === location.pathname) {
            this.activeIndex = `${i}-${j}`
            break
          }
        }
      } else {
        if (this.navList[i].path === location.pathname) {
          this.activeIndex = `${i}`
          break
        }
      }

    }
    // } else {
    //   for (let i = 0; i < this.navList.length; i++) {
    //     if (this.navList[i].path === location.pathname) {
    //       this.activeIndex = `${i}`
    //       break
    //     }
    //   }
    // }

    this.getWindowHeight()
  },
  head() {
    return {
      title: this.site.systemName,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.site.remark
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.site.keyWord
        }
      ]
    }
  }
}
</script>


<style lang="scss">
@import 'element-ui/lib/theme-chalk/index.css';
// @import '../static/iconfont.css';

html {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #333;
}

html,
body,
#__nuxt,
#__layout,
#__layout > div:first-child {
  min-height: 100%;
}

html,
body,
ul,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}

main,
section,
aside,
header,
footer {
  display: block;
}

li {
  list-style: none;
}

* {
  box-sizing: border-box;
}

a {
  color: $--black-text-color;
  text-decoration: none;

  &:hover {
    // text-decoration: underline;
    // color: $--color-primary;
  }
}


.clear::after {
  content: '';
  display: block;
  visibility: hidden;
  clear: both;
}

em {
  font-style: normal;
}

.line2 {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.el-input.is-disabled .el-input__inner {
  color: #999;
}

.d-vip {
  min-width: 700px;
}

.el-menu {
  padding: 10px 0;
  font-weight: 500;

  .el-menu-item {
    height: 40px;
    line-height: 40px;
  }
}

.el-menu {
  padding: 10px 0;
  font-weight: 500;

  .el-submenu {
    .el-submenu__title {
      height: 40px;
      line-height: 40px;
    }
  }
}

.el-table td,
.el-table th {
  padding: 5px 0;
  font-size: 12px;
}

.el-table + .el-pagination {
  margin-top: 15px;
}

</style>

<style lang="scss" scoped>
.nav-item-active {
  color: #1E9FFF !important;
}
.user_mask_box {
  padding: 8px;
  width: 230px;
  .t_top_user {
    border-bottom: 1px solid #dcdfe6;
    img {
      width: 80px;
      height: 80px;
      display: block;
      margin: 0 auto 20px;
    }
    .user_name {
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-weight: 700;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span {
      width: 100%;
      display: inline-block;
      line-height: 20px;
      font-size: 13px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .make_box {
    margin: 0;
    padding: 20px 0 0;
    li {
      height: 22px;
      display: flex;
      align-items: center;
      cursor: pointer;
      a {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .txt_icon {
        width: 16px;
        height: 16px;
        margin-right: 20px;
        display: block;
      }
      .txt {
        height: 25px;
        line-height: 25px;
      }
    }
  }
}


.slider_left_box {
  background: #fff;
  width: 240px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  .user_box {
    padding-top: 20px;
    .user_img {
      width: 60px;
      height: 60px;
      display: block;
      margin: 0 auto;
    }
    .user_name {
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-weight: 700;
      display: inline-block;
      width: 100%;
    }
    .user_bh {
      font-size: 14px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      display: inline-block;
      width: 100%;
    }
    .make_btn {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 5px;
      .el-button {
        margin: 0 0 5px;
      }
    }
  }
  .menu_box {
    flex: 1;
    .el-icon-hide {
      content: '';
    }
    .hideSpanNow {
      display: none;
    }
  }
}

.slider_left_box.slider_noS_box {
  .user_box {
    .make_btn {
      .el-button {
        margin-right: 5px;
      }
    }
  }
}

.active{
  background:#ECF5FF;
  color: #409EFF;
}
.bg {
  min-width: 1280px;
  background: $--wap-bg-color;
}

.bw {
  min-width: 1280px;
  padding: 0 15px;

  &::after {
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
  }
}

.bg > header {
  padding: 0;
  border-bottom: 3px solid $--main-top-border;

  .top-nav {
    background: white;
    text-align: right;
    padding: 15px 0;

    .logo {
      width: 144px;
      height: 80px;
      float: left;

      img {
        object-fit: contain;
      }
    }

    .nav {
      margin-top: 24px;
      display: inline-block;
    }

    a {
      background: white;
    }

    .el-button {
      padding: 8px 0;
      min-width: 88px;
    }

    a + a {
      margin-left: 25px;
    }

    .el-button.selected {
      color: $--color-primary;
      border-color: $--button-border-primary;
      background-color: $--light-color-primary;
    }
  }

  .header_top {
    height: 60px;
    display: flex;
    background: #fff;
    .logo_l_box {
      border-bottom: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0 10px;
      width: 180px;
      justify-content: center;
      .img_logo {
        width: 144px;
        height: 80px;
        margin-right: 20px;
        position: relative;
        img {
          height: 100%;
          width: 100%;
          display: block;
          object-fit: contain;
        }
        a {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
      .img_btn {
        width: 18px;
        height: 14px;
        cursor: pointer;
      }
    }
    .r_make_box {
      flex: 1;
      overflow: hidden;
      display: flex;
      padding: 0 5px;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      .goods_l {
        ul {
          display: inline-flex;
          li {
            display: inline-flex;
            padding: 10px 5px;
            cursor: pointer;
            align-items: center;
            .jump_btn_a {
              display: inline-flex;
              text-decoration: none;
              align-items: center;
            }
            a {
              text-decoration: none;
              height: 20px;
              line-height: 20px;
            }
            .goods_icon {
              width: 20px;
              height: 20px;
              display: block;
              font-size: 20px;
              line-height: 20px;
              margin-right: 10px;
            }
            .t_btn {
              white-space: nowrap;
              height: 20px;
              line-height: 20px;
            }
            .t_txt {
              height: 20px;
              line-height: 20px;
              white-space: nowrap;
            }
            .el-input {
              width: 200px;
              margin-right: 10px;
            }
          }
        }
      }
      .user_box {
        display: flex;
        .money_box {
          display: inline-flex;
          ul {
            display: inline-flex;
            li {
              display: inline-flex;
              align-items: center;
              cursor: pointer;
              margin-right: 5px;
              span:first-child {
                margin: 0 5px;
                white-space: nowrap;
              }
              span:last-child {
                background: #409EFF;
                padding: 6px 10px;
                border-radius: 3px;
                color: #ffffff;
                font-size: 75%;
                white-space: nowrap;
              }
              img {
                width: 20px;
                height: 20px;
                display: block;
              }
            }
          }
        }
        .user_box {
          display: inline-flex;
          margin-left: 25px;
          align-items: center;
          .emali_img {
            cursor: pointer;
            margin-right: 10px;
            width: 20px;
            height: 20px;
            display: block;
            font-size: 24px;
            line-height: 20px;
          }
          .user_picture_box {
            width: 30px;
            height: 30px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            .user_img {
              width: 16px;
              height: 16px;
              cursor: pointer;
            }
            .mask_hide_btn {
              position: absolute;
              left: 0;
              top: 0;
              width: 30px;
              height: 30px;
              padding: 0;
              z-index: 1;
              background: transparent;
              border: 0;
              outline: none;
            }
          }
        }
      }
    }
  }

  h1 {
    font-size: 18px;
    line-height: 80px;
    float: left;
    display: none;
  }

  & + section {
    min-height: calc(100% - 260px);
  }
}

.bg.second_type_fx > header {
  border-bottom: 0;
}

.bg > section {
  padding: 25px 15px;
  position: relative;

  aside {
    width: 170px;
    float: left;
    background-color: #fff;

    .el-menu {
      border-right: 0;

      .el-menu-item.is-active {
        outline: 0;
        background-color: #ecf5ff;
        width: 100%;
        min-width: auto;
      }

      a:hover {
        text-decoration: none;

        i,
        span {
          color: $--color-primary;
        }
      }
    }
  }

  ::v-deep main {
    margin-left: 185px;
    overflow: hidden;
    position: relative;

    h3 {
      font-size: 14px;
      height: 36px;
      line-height: 36px;
      padding: 0 20px;
      color: #010101;
      background: white;
      margin-bottom: 15px;

      & > span {
        padding-left: 26px;
        border-left: 4px solid $--color-primary;
      }

      .el-button {
        float: right;
        padding: 6px 10px;
        margin-top: 4px;
      }

      a + a {
        .el-button {
          margin-right: 15px;
        }
      }
    }

    h3 + .el-button + section,
    section + section {
      margin-top: 15px;
    }

    .query {
      float: right;
      padding: 10px 15px;
      margin: 15px 15px 0 0;
    }

    .filter {
      padding: 6px 15px;
      background: white;
      margin: 10px 0;

      section {
        padding: 6px 0;

        & + section {
          margin-top: 0;
        }

        &:not(:last-child) {
          border-bottom: 1px dashed $--basic-border-color;
        }
      }

      .query {
        margin: 5px 0 0;
      }
    }

    .tip {
      font-size: 12px;
      background: white;
      padding: 15px;
      color: $--basic-orange;

      a {
        color: $--black-text-color;

        &:hover {
          color: $--color-primary;
        }
      }
    }
  }
}

.bg.second_type_fx {
  section {
    padding: 0;
  }
  .bw {
    display: flex;
    main {
      flex: 1;
      overflow: hidden;
      margin: 5px;
    }
  }
}

.bg > footer {
  padding: 15px 0;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  background: $--tab-gray-color;

  a:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: $--gray-text-color;
    vertical-align: text-top;
    margin: 2px 0 0 15px;
  }

  a + a {
    margin-left: 15px;
  }
}
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style2/common.css';
@import 'assets/style/style2/openlogin.css';
@import 'assets/style/style2/style.css';
@import 'assets/style/style2/font_1451715_0505c2bxv7b7.css';
//@import 'element-ui/lib/theme-chalk/index.css';
.common-container .logoimg {
  object-fit: fill;
}
</style>

